<template>
  <div class="key-management">
    <img @click="router({path: './addKey'})" src="@/assets/jihuo11.png" class="manage-img" alt="">
    <p class="title">——  我的密钥  ——</p>
    <div class="key-list" v-if="keyLength && keyLength.length > 0">
      <div class="item" @click="inputMessage.is_show = 'true', inputMessage.num = 1, inputMessage.sendCon='密钥1'">
        <span></span>
        <div class="cons">          
          <p class="key-title">VIP会员密钥</p>
          <p class="key-time">2018.10.24 15:00:24</p>
          <p class="key-num">未分类  |  剩余次数 5</p>
          <img src="@/assets/miyaoguanli05.png" class="edit-img" alt="">
          <p class="key-name" v-if="inputMessage.num == 1">{{inputMessage.sendCon}}</p>
          <p class="key-name" v-else>密钥1</p>
        </div>
      </div>
      <div class="item child">
        <span></span>
        <div class="cons">          
          <p class="key-title">VIP会员密钥</p>
          <p class="key-time">2018.10.24 15:00:24</p>
          <p class="key-num">儿童测试  |  剩余次数 4</p>
          <img src="@/assets/miyaoguanli05.png" class="edit-img" alt="">
          <p class="key-name">密钥2</p>
        </div>
      </div>
      <div class="item juvenile">
        <span></span>
        <div class="cons">          
          <p class="key-title">VIP会员密钥</p>
          <p class="key-time">2018.10.24 15:00:24</p>
          <p class="key-num">少年测试  |  剩余次数 2</p>
          <img src="@/assets/miyaoguanli05.png" class="edit-img" alt="">
          <p class="key-name">大儿子</p>
        </div>
      </div>
    </div>
    <p class="tip-none" v-else>当前暂无密钥，点击上方“密钥激活”去激活吧！</p>
    <model-input-box :inputMessage = "inputMessage" @sendMsgs="hasEditName"></model-input-box>
  </div>
</template>

<script>

import modelInputBox from '@/components/modelInputBox'

  export default {
    components: {
      modelInputBox,
    },
    data () {
      return {
        keyLength: ['1'],
        inputMessage: {},
      }
    },
    created () {
      this.inputMessage = {
        title: '请输入密钥备注',
        tip: '请输入备注名称（不超过4个字）',
        btn: '确认',
        is_show: false,
        num: 0,
        sendCon: '密钥1'
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      hasEditName (data) {
        console.log(data)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.key-management
  background-color #fff
  .manage-img
    padding 2.5rem 1.5rem
    box-sizing border-box
  .arrow
    position absolute
    right 2.6rem
    width 3.5rem
    top 4.8rem
  .title
    color #172F6D
    font-weight 500
    font-size 1.6rem
    text-align center
    height 1.6rem
    line-height 1.6rem
    margin-top 1.5rem
  .tip-none
    text-align center
    font-size 1.3rem
    color #999
    margin-top 4.5rem
  .key-list
    margin-top 1rem
    .item
      position relative
      height 16.5rem
      margin-top -1.7rem
      &:first-child
        margin-top 0
      span
        display: block;
        width: 96%;
        height: 16.8rem;
        background-image: url('../../assets/yinying11.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        margin-left: 2%;
        background-position-y: .6rem;
      .cons
        background:linear-gradient(45deg,rgba(112,112,112,1) 0%,rgba(125,125,125,1) 69%);
        width 88%
        margin-left 6%
        position absolute
        margin-top 2rem
        height 12.8rem
        border-radius .6rem
        padding 2rem 1.5rem
        box-sizing border-box
        .key-title
          color #fff
          font-size 1.8rem
          font-weight bold
          height 1.8rem
          line-height 1.8rem
        .key-time
          font-size 1.2rem
          color #fff
          height 1.2rem
          line-height 1.2rem
          margin-top 1.2rem
        .key-num
          position absolute
          bottom 2rem
          left 1.5rem
          font-size 1.2rem
          color #fff
        .edit-img
          position absolute
          width 3.4rem
          right 1.5rem
          top 2.3rem
        .key-name
          color #fff
          font-weight bold
          font-size 1.8rem
          position absolute
          right 1.5rem
          bottom 2rem
    .child
      span
        background-image url('../../assets/yinying22.png')
      .cons
        background:linear-gradient(45deg,rgba(202,169,135,1) 0%,rgba(220,200,176,1) 100%);
    .juvenile
      span
        background-image url('../../assets/yinying33.png')
      .cons
        background:linear-gradient(45deg,rgba(103,112,138,1) 0%,rgba(75,85,112,1) 100%);
</style>
